<template>
  <div class="area">
    <el-row :gutter="10">
      <el-col :sm="12" :xs="24">
        <div class="app-container">
          <div class="filter-container">
            <el-input
              :placeholder="$t('table.area.label')"
              class="filter-item search-item"
              v-model="label"
            />
            <el-button
              @click="search"
              class="filter-item"
              plain
              type="primary"
            >{{ $t("table.search") }}
            </el-button
            >
            <el-button @click="reset" class="filter-item" plain type="warning" >
              {{ $t("table.reset") }}
            </el-button>
            <el-button @click="add" class="filter-item" plain type="danger" v-has-permission="['area:add']">
              {{ $t("table.add") }}
            </el-button>
            <el-dropdown
              class="filter-item"
              trigger="click"
              v-has-any-permission="[ 'area:delete', 'area:export']"
            >
              <el-button>
                {{ $t("table.more") }}
                <i class="el-icon-arrow-down el-icon--right"/>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  @click.native="deleteArea"
                  v-has-permission="['area:delete']"
                >{{ $t("table.delete") }}
                </el-dropdown-item>

              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <el-tree
            :check-strictly="true"
            :data="areaTree"
            :filter-node-method="filterNode"
            @node-click="nodeClick"
            :load="loadTree"
            highlight-current
            node-key="id"
            ref="areaTree"
            :lazy="true"
            show-checkbox
          />
        </div>
      </el-col>
      <el-col :sm="12" :xs="24">
        <el-card class="box-card">
          <div class="clearfix" slot="header">
            <span>{{
              area.id === "" ? this.$t("common.add") : this.$t("common.edit")
            }}</span>
          </div>
          <div>
            <el-form
              :model="area"
              :rules="rules"
              label-position="right"
              label-width="100px"
              ref="form"
            >
              <el-form-item
                :hidden="true"
                :label="$t('table.area.parentId')"
                prop="parentId"
              >
                <el-tooltip
                  :content="$t('tips.topId')"
                  class="item"
                  effect="dark"
                  placement="top-start"
                >
                  <el-input readonly v-model="area.parentId"/>
                </el-tooltip>
              </el-form-item>
              <el-form-item
                :label="$t('table.area.parentId')"
                prop="parentLabel"
              >
                <el-input
                  readonly
                  disabled="disabled"
                  v-model="area.parentLabel"
                />
              </el-form-item>
              <el-form-item :label="$t('table.area.label')" prop="label">
                <el-input v-model="area.label"/>
              </el-form-item>
              <el-form-item :label="$t('table.area.code')" prop="code">
                <el-input v-model="area.code"/>
              </el-form-item>
              <el-form-item :label="$t('table.area.fullName')" prop="fullName">
                <el-input v-model="area.fullName"/>
              </el-form-item>
              <el-form-item
                :label="$t('table.area.longitude')"
                prop="longitude"
              >
                <el-input v-model="area.longitude"/>
              </el-form-item>
              <el-form-item :label="$t('table.area.latitude')" prop="latitude">
                <el-input v-model="area.latitude"/>
              </el-form-item>
              <el-form-item :label="$t('table.area.source')" prop="source">
                <el-input v-model="area.source"/>
              </el-form-item>
              <el-form-item :label="$t('table.area.level')" prop="level">
                <el-radio-group
                  border="true"
                  size="small"
                  v-model="area.level.key"
                >
                  <el-radio-button :key="index" :label="item" :value="key" v-for="(item, key, index) in dicts.AREA_LEVEL">
                    {{ item }}
                  </el-radio-button>
                </el-radio-group>
              </el-form-item>

              <el-form-item
                :label="$t('table.area.sortValue')"
                prop="sortValue"
              >
                <el-input-number
                  :max="100"
                  :min="0"
                  @change="handleNumChange"
                  v-model="area.sortValue"
                />
              </el-form-item>
            </el-form>
          </div>
        </el-card>
        <el-card class="box-card" style="margin-top: -2rem;">
          <el-row>
            <el-col :span="24" style="text-align: right">
              <el-button @click="submit" plain type="primary">{{
                area.id === "" ? this.$t("common.add") : this.$t("common.edit")
                }}
              </el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
